import React, { useEffect } from 'react'
// import axios from 'axios';
import './index.scss';
import abc1 from '../../img/two-member.png'
import abc2 from '../../img/collection.png'
import abc3 from '../../img/more.png'
import abc4 from '../../img/gift.png'
import abc5 from '../../img/addto.png'
import abc6 from '../../img/cart-detail.png'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay } from 'swiper';
import useRightNav from '../../components/hoc/useRightNav';
//将 ui组件转容器组件
import { connect } from 'react-redux';
//引入action
import { addCartAction } from '../../store/actions/cart';
import { fetchItemData } from '../../store/actions/wzdata';
import { useParams } from 'react-router-dom';
import { useNavigate } from "react-router-dom";

const Item = (props) => {
    const params = useParams();
    // console.log(params);
    const ptKey = params.id;
    const quickBtn = useRightNav();
    const navigate = useNavigate();
    useEffect(() => {
        props.fetchItemData(ptKey);
    }, []);
    const goShop = () => {
        navigate('/cart');
    }
    const addCartFn = () => {
        //1.整理需要的数据 ,id  name  pic price num
        const { ptKey, name, listImages, retailPrice } = props.itemObj.templateInfo;
        const data = {
            id: ptKey,
            name: name,
            pic: listImages,
            price: retailPrice,
            num: 1,
            checked: true
        }
        //调用 action中的动作，添加购物车到 redux中
        props.addCartAction(data);

    }
    return (
        <div className='item_con'>
            <div className='item_swiper'>
                <Swiper
                    modules={[Pagination, Autoplay]}
                    pagination={{ clickable: true }}
                    autoplay={{ delay: 2500 }}
                    loop={true}
                >
                    {
                        props.swiperArr.map((item, index) => <SwiperSlide key={index}>
                            < img src={item} alt={item}></img>
                        </SwiperSlide>)
                    }
                </Swiper>
            </div>
            <div className='item_kaitong'>
                <span className='kaitong_span'>开通旺旺会员，购买立省21元</span>
                <span className='kaitong_span'>立即开通</span>
            </div>
            <div className='jiage'>
                <span>￥</span>
                <span>{props.itemObj.templateInfo.origPrice}</span>
                <span>/{props.itemObj.templateInfo.unit}</span>
                <span>￥{props.itemObj.templateInfo.supplyPrice}</span>
                <span><img src={abc1} alt={2} /></span>
            </div>
            <div className='shangping'>
                <span>
                    {props.itemObj.templateInfo.name}
                    {props.itemObj.templateInfo.commodityBatchList[0].flavour}
                    {props.itemObj.templateInfo.commodityBatchList[0].spec}
                </span>
                <span><div><img src={abc2} alt={2} /></div><span>收藏</span></span>
            </div>
            <span className='jieshao'>{props.itemObj.templateInfo.description}</span>
            <div className='kongbai'></div>
            <div className='yixuan'>
                <span>已选</span>
                <div className='yixuan_right'>
                    <span>{props.itemObj.templateInfo.displayName}</span>
                    <span><img src={abc3} alt={2} /></span>
                </div>
            </div>
            <div className='cuxiao'>
                <span>促销</span>
                <div className='cuxiao_right'>
                    <span className='cuxiao_right1'>
                        <span><img src={abc4} alt={2} /></span>
                        <span>本商品当前正在参与1项满赠活动</span>
                    </span>
                    <span className='cuxiao_right2'><img src={abc3} alt={2} /></span>
                </div>
            </div>
            <div className='kongbai1'></div>
            <div className='xiangqing'>
                <span></span>
                <span>商品详情</span>
            </div>
            <div className='jieshaotu'>
                {
                    props.jieshaolist.map((item, index) => <div key={index}>
                        <img src={item} alt={item} />
                    </div>)
                }
            </div>
            <div className='kongbai'></div>
            <div className='xiangqing'>
                <span></span>
                <span>规格参数</span>
            </div>
            <div className='heixian'></div>
            <div className='kongbai'></div>
            <div className='xiangqing'>
                <span></span>
                <span>价格说明</span>
            </div>
            <div className='heixian'></div>
            <div className='shuoming'>
                <span>划线价</span>
                <span>指商品的专柜价、吊牌价、正品零售价、厂商指导价或 该商品的曾经展示过销售价等，并非原价，仅供参考。</span>
            </div>
            <div className='shuoming'>
                <span>非划线价</span>
                <span>指商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员优惠券、积分等发生变化，最终以订单为准</span>
            </div>
            <div className='end'>
                <div className='end_left'>
                    <img src={abc5} alt={2} />
                    <p>客服</p>
                </div>
                <div className='end_con' onClick={goShop}>
                    <img src={abc5} alt={2} />
                    <p>购物车</p>
                </div>
                <div className='end_right'>
                    <img src={abc6} alt={2} />
                    <span onClick={addCartFn}>加入购物车</span>
                </div>
                {quickBtn}
            </div>
        </div>

    )
}
export default connect(
    state => ({
        cart: state.cart,
        itemObj: state.wzdata.itemObj || {
            templateInfo: {
                commodityBatchList: [0]
            },
        },
        swiperArr: state.wzdata.swiperArr || [],
        jieshaolist: state.wzdata.jieshaolist || []
    }),
    { addCartAction, fetchItemData }
)(React.memo(Item));
